<template>
	<view class="cate_detail">
		<view class="user_field">
			<view class="user_avatar">
				<image :src="user.avatarUrl" class="avatar_image"></image>
			</view>
			<i class="user_name">{{user.name}}</i>
		</view>
		<view class="collect_field">
			<collect :collectNum="cate.article.favoriteNumber" :type="'r'" :mid="id" :uid="10001"></collect>
		</view>
		<view class="img_carosel">
			<swiper :interval="3000" :duration="1000" :indicator-dots="true" :autoplay="true" :circular="true">
				<swiper-item v-for="(item,index) in cate.article.pictures" :key="index">
					<image :src="item.filePath" mode="aspectFill"></image>				
				</swiper-item>
			</swiper>
		</view>
		<view class="cate_article">
			<image src="../../../static/icons/gonglue1.png" class="attribute_icon"></image>
			<view class="cate_name">{{cate.raider.title}}</view>
			<h class="cate_describe">
				<p class="cate_shareReason">分享理由</p>{{cate.raider.reason}}
			</h>
			<view class="article_content">
				<p class="cate_mainText">{{cate.raider.content}}</p>
			</view>
		</view>
		<view class="img_field">
			<image src="../../../static/icons/relatePic.png" class="img_icon"></image>
			<h>相关图片</h>
			<scroll-view  scroll-x="true" class="img_items" >
				<view class="img_item" v-for="(item,index) in cate.article.pictures" :key="index">
					<image :src="item.filePath" class="item_img"></image>
				</view>
			</scroll-view>
		</view>
		<view class="comment_field">
			<comment :comments="cate.article.articleComments" :type="'Raider'" :fid="cate.raiderArticleID" :uid="10001"></comment>
		</view>
	</view>
</template>

<script>
	import collect from "../../../components/collect.vue"
	import comment from "../../comment/user-comment/comment.vue"
	export default{
		components:{
			collect,
			comment
		},
		data(){
			return{			
				swipers:[
					{src:"../../../static/images/doupi.png"},
					{src:"../../../static/images/reganmian.png"}
				],
				id:0,
				cate:null,
				user:null
			}
		},
		methods:{
			async getCateDetail(){
				const res=await this.$myRequest({
					url:'/RaiderArticle/api/findAllLoad/id='+this.id
				})
				console.log(res)
				this.cate=res.data
				this.getuser()
			},
			async getuser(){
				const res=await this.$myRequest({
					url:'/User/api/find/id='+this.cate.userID
				})
				this.user=res.data
			},
			dearText(){
				
			}
		},
		onLoad(options){
			this.id=options.id
			this.getCateDetail()
		}
	}
</script>

<style lang="less">
	.user_field{
	float:left;
		min-width: 80%;
		height:32px;
		.user_avatar{
			border:1px solid #eee;
			border-radius:50%;
			height:32px;
			width:32px;
			margin-left: 8px;
			margin-right: 8px;
			float: left;
			.avatar_image{
				height: 100%;
	            width:100%;
	            border-radius:50%;
	            background-color: #eee;
			}
		}
		.user_name{
			font-size: 14px;
			line-height: 32px;
		}
	}
	.cate_mainText{
		white-space:pre-line;
		background-color: #fbfde8;
		border-radius: 10%;
		padding-left: 10px;
		padding-right: 10px;
		padding-top:20px;
		padding-bottom:20px;
		font-size:18px;
	}
	.collect_field{
		height:32px;
	}
	.img_carosel{
		margin-top: 10px;
		swiper{
			height: 300px;
			image{
			width:100%;
			height:300px;
			
			}
		}
	}
	.cate_article{
		margin-top: 15px;
		margin-left:8px;
		.attribute_icon{
			width:50rpx;
			height:50rpx;
			float: left;
		}
		.cate_name{
			font-size:20px;
			font-weight: 600;
		}
		.cate_shareReason{
			height: 35rpx;
			width: 100rpx;
			background-color: #F0AD4E;
			font-size: 12px;
			line-height: 20px;
			text-align: center;
			float:left;
		}
		.cate_describe{
			margin-top: 12px;
			margin-bottom: 8px;
			display: inline-block;
			font-size: 15px;
		}
	}
	.comment_field{
		margin-top: 30px;
	}
	.img_field{
		margin-top:20px;
		padding-left:10px;
		.img_icon{
			width:50rpx;
			height:50rpx;
			float: left;
		}
		.img_items{
			width:100%;
			height:210px;
			white-space: nowrap; 
		}
		.img_item{
			border-radius: 5%;
			border:1rpx solid #DCDFE6;
			background-color: #fff;
			margin-top:10px;
			margin-right: 10px;
			display: inline-block;
			width:215px;
			height:185px;
			.item_img{
				height:100%;
				width:100%;	
			}
		}
	}
</style>
